<template>
  <div class="fundContrastCon">
    <!-- 悬浮俩pk产品 -->
    <transition name="fade">
      <div class="pkFundFixedCon" v-show="showFundVsFixed">
        <div class="pkFundFixedLeft">
          <div class="ellipsis">
            中邮军民融合灵活配置股票中邮军民融合灵活配置股票
          </div>
        </div>
        <div class="pkFundFixedRight">
          <div class="ellipsis">
            富国研究精选灵活配置混合中邮军民融合灵活配置股票
          </div>
        </div>
      </div>
    </transition>
    <!-- pk产品信息 -->
    <div class="switchoverCon">
      <div class="switchover">切换完整版</div>
    </div>
    <div class="fundContrastArea">
      <div
        :class="
          !pkStatus
            ? 'fundLeftArea fundArea'
            : 'fundLeftArea fundArea fundLeftAreaMove'
        "
      >
        <div class="fundTypeTag fundTypeTagLeft">稳健理财</div>
        <div class="pkFundCon">
          <div class="fundName ellipsis_2">
            中邮军民融合灵活配置股中邮军民融合灵活配置股
          </div>
          <div class="fundTagCon">
            <span>成长级</span>
            <span>股票型</span>
          </div>
        </div>
        <transition name="fade">
          <img v-if="showFundVsLogo" class="fundVsLogo" :src="fundVsLogoSrc" />
          <!-- <span v-if="showFundVsLogo" class="fundVsLogo1"></span> -->
        </transition>
      </div>
      <div
        :class="
          !pkStatus
            ? 'fundRightArea fundArea'
            : 'fundRightArea fundArea fundRightAreaMove'
        "
      >
        <div class="fundTypeTag fundTypeTagRight">财富成长</div>
        <div class="pkFundCon pkFundConPadding">
          <div class="fundName ellipsis_2">
            中邮军民融合灵活配置股中邮军民融合灵活配置股
          </div>
          <div class="fundTagCon">
            <span>成长级</span>
            <span>股票型</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 诊断评分 -->
    <div class="fundScoreCon">
      <div class="fundScoreLeftCon"></div>
      <div class="scoreCon">
        <div class="scoreWord">诊断评分</div>
        <div class="scoreDate">2021-09-03</div>
      </div>
      <div class="fundScoreRightCon"></div>
    </div>
    <div class="ps">
      <div>
        <div class="part" ref="id0">
          <div class="title">标题0</div>
          <div class="ctent">
            和开发者交流问题的细节 关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进和开发者交流问题的细节
            关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进和开发者交流问题的细节
            关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进和开发者交流问题的细节
            关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进和开发者交流问题的细节
            关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进
          </div>
        </div>
        <div class="part" ref="id1">
          <div class="title">标题1</div>
          <div class="ctent">
            和开发者交流问题的细节 关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进和开发者交流问题的细节
            关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进和开发者交流问题的细节
            关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进和开发者交流问题的细节
            关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进和开发者交流问题的细节
            关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进
          </div>
        </div>
        <div class="part" ref="id2">
          <div class="title">标题2</div>
          <div class="ctent">
            和开发者交流问题的细节 关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进和开发者交流问题的细节
            关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进和开发者交流问题的细节
            关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进和开发者交流问题的细节
            关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进和开发者交流问题的细节
            关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进
          </div>
        </div>
        <div class="part" ref="id3">
          <div class="title">标题3</div>
          <div class="ctent">
            和开发者交流问题的细节 关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进和开发者交流问题的细节
            关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进和开发者交流问题的细节
            关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进和开发者交流问题的细节
            关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进和开发者交流问题的细节
            关注并接收问题和回答的更新提醒
            参与内容的编辑和改进，让解决方法与时俱进
          </div>
        </div>
      </div>

      <div class="fundContrastBtns">
        <div class="btnItem">
          <div class="btnItemImg">
            <img
              class="menuImg"
              src="@/assets/imgs/menu.png"
              @click="isShowShadow(true)"
              alt=""
            />
          </div>
          <div
            class="menusShadow"
            v-show="isShowMenus"
            @click="isShowShadow(false)"
            @touchmove.prevent
          ></div>
          <div class="navgator menus" v-show="isShowMenus">
            <ul class="uls">
              <li
                class="lis"
                :class="{ active: item.key == navgatorIndex }"
                :id="'id' + index"
                v-for="(item, index) in menus"
                :key="index"
                @click.stop="handleLeft(item.key)"
              >
                {{ item.value }}---- {{ item.key }}---{{ navgatorIndex }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/pages/pk.scss";
export default {
  data() {
    return {
      showFundVsFixed: false,
      showFundVsLogo: false,
      pkStatus: false,
      // require形式是base64
      fundVsLogoSrc: require("@/assets/imgs/fundVsLogo.png"),
      //  props传来数据

      isSimpleVersion: false,
      fund1Info: {},
      fund2Info: {},
      // 菜单定位
      isShowMenus: false,
      navgatorIndex: 0,
      listBoxState: true, //点击导航栏时，暂时停止监听页面滚动
      menus: [
        {
          value: "标题0",
          key: "0",
          type: "all",
        },
        {
          value: "标题1",
          key: "1",
          type: "all",
        },
        {
          value: "标题2",
          key: "2",
          type: "all",
        },
        {
          value: "标题3",
          key: "3",
          type: "all",
        },
      ],
    };
  },
  created() {
    let _this = this;
    setTimeout(() => {
      _this.pkStatus = true;
    }, 100);
    setTimeout(() => {
      _this.showFundVsLogo = true;
    }, 250);
  },
  mounted() {
    let timeId;
    window.addEventListener(
      "scroll",
      () => {
        // 页面滚动停止100毫秒后才会执行下面的函数。
        clearTimeout(timeId);
        timeId = setTimeout(() => {
          this.scrollToTop();
          console.log("执行完了哦");
        }, 100);
      },
      true
    );
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    //是否隐藏目录弹框
    isShowShadow(status) {
      this.isShowMenus = status;
    },
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > 160) {
        this.showFundVsFixed = true;
      } else {
        this.showFundVsFixed = false;
      }
      if (scrollTop > 0) {
        this.$parent.fixedMenu = true;
      } else {
        this.$parent.fixedMenu = false;
      }
    },
    // 点击导航菜单，页面滚动到指定位置
    handleLeft(index) {
      this.navgatorIndex = index;
      let id = "id" + index;
      this.$refs[id].scrollIntoView({
        behavior: "smooth", // 平滑过渡
        block: "start", // 上边框与视窗顶部平齐。默认值
      });
      this.listBoxState = false;

      let timeId;
      clearTimeout(timeId);
      timeId = setTimeout(() => {
        this.listBoxState = true;
      }, 200);
    },
    // 监听页面元素滚动，改变导航栏选中
    scrollToTop() {
      // 获取视窗高度
      var domHight = document.body.offsetHeight;
      // dom滚动位置
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(this.listBoxState, 11);
      if (this.listBoxState) {
        //作用是点击导航栏时，延迟这里执行。
        this.menus.map((v, i) => {
          console.log(v, i);
          // console.log(v, i);
          // // 获取监听元素距离视窗顶部距离
          // var offsetTop = this.$refs[id].offsetTop;
          // // 获取监听元素本身高度
          // var scrollHeight = this.$refs[id].scrollHeight;

          // // 如果 dom滚动位置 >= 元素距离视窗距离 && dom滚动位置 <= 元素距离视窗距离+元素本身高度
          // // 则表示页面已经滚动到可视区了。
          // if (scrollTop >= offsetTop && scrollTop <= offsetTop + scrollHeight) {
          //   // 导航栏背景色选中
          //   this.navgatorIndex = i;
          // }
        });
      }
    },
  },
};
</script>

<style lang="less">
.ps {
  .part {
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #ddd;
    padding: 0 0.3rem;
    height: 9rem;
  }
  .title {
    height: 0.8rem;
    line-height: 1.1rem;
    font-size: 0.32rem;
    color: #000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 0.01rem solid #ddd;
  }
  .ctent {
    font-size: 0.28rem;
    line-height: 0.5rem;
    padding: 0.3rem 0;
  }
}
.ellipsis_2 {
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
